<template>
	<view class="home-page">
		<!-- 顶部状态栏 -->
		<view class="top-bar">
			<view class="logo">婚恋</view>
			<view class="msg-icon" @click="goToMessages">
				<text class="icon">🔔</text>
				<view v-if="unreadCount > 0" class="badge">{{ unreadCount }}</view>
			</view>
		</view>

		<!-- 个性化欢迎语 -->
		<view class="welcome-card" v-if="userInfo.nickname">
			<view class="welcome-content">
				<text class="welcome-text">你好，{{ userInfo.nickname }}！</text>
				<text class="match-info">今天有 <text class="highlight">{{ matchCount }}</text> 位新嘉宾和你匹配哦 ❤️</text>
			</view>
		</view>

		<!-- 轮播图 -->
		<view class="banner-section">
			<swiper class="banner-swiper" :indicator-dots="true" :autoplay="true" :interval="4000" :duration="1000"
				:circular="true" indicator-color="rgba(255, 255, 255, 0.5)" indicator-active-color="#E91E63">
				<swiper-item v-for="(banner, index) in bannerList" :key="index">
					<view class="banner-item" @click="handleBannerClick(banner)">
						<image :src="banner.cover_image" class="banner-image" mode="aspectFill"
							@error="handleImageError" @load="handleImageLoad"></image>
						<view class="banner-mask">
							<view class="banner-title">{{ banner.name }}</view>
							<view class="banner-subtitle" v-if="banner.subtitle">{{ banner.subtitle }}</view>
							<view class="banner-btn">立即报名</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 小喇叭公告栏 -->
		<view class="notice-bar">
			<text class="notice-icon">📢</text>
			<swiper class="notice-swiper" vertical :autoplay="true" :interval="3000" :duration="500"
				:circular="true">
				<swiper-item v-for="(notice, index) in noticeList" :key="index">
					<view class="notice-text">{{ notice.content }}</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 核心功能入口 -->
		<view class="function-grid">
			<view class="grid-item" v-for="(item, index) in functionList" :key="index" @click="handleFunctionClick(item)">
				<view class="grid-icon-wrapper">
					<text class="grid-icon">{{ item.icon }}</text>
				</view>
				<text class="grid-text">{{ item.name }}</text>
			</view>
		</view>

		<!-- 热门活动展示区 -->
		<view class="section activity-recommend-section">
			<view class="section-header">
				<text class="section-title">🎉 热门活动</text>
				<text class="section-more" @click="goToActivityList">查看更多 ></text>
			</view>
			<view class="activity-marquee">
				<view class="marquee-container">
					<view class="marquee-content">
						<!-- 第一组活动 -->
						<view class="activity-item" v-for="(activity, index) in hotActivities" :key="index" 
							@click="handleActivityClick(activity)">
							<view class="activity-card">
								<image :src="activity.coverImage" class="activity-image" mode="aspectFill" 
									@error="handleImageError" @load="handleImageLoad"></image>
								<view class="activity-info">
									<view class="activity-name">{{ activity.name }}</view>
									<view class="activity-desc">{{ activity.description || '精彩活动等你参加' }}</view>
									<view class="activity-meta">
										<text class="activity-time">⏰ {{ formatActivityTime(activity.startTime) }}</text>
										<text class="activity-location" v-if="activity.location">📍 {{ activity.location }}</text>
									</view>
									<view class="activity-footer">
										<text class="activity-price">¥{{ activity.price || 0 }}</text>
										<view class="activity-btn">立即报名</view>
									</view>
								</view>
								<view class="activity-status" v-if="activity.status === 1">报名中</view>
							</view>
						</view>
						<!-- 第二组活动（用于无缝滚动） -->
						<view class="activity-item" v-for="(activity, index) in hotActivities" :key="index + 100" 
							@click="handleActivityClick(activity)">
							<view class="activity-card">
								<image :src="activity.coverImage" class="activity-image" mode="aspectFill" 
									@error="handleImageError" @load="handleImageLoad"></image>
								<view class="activity-info">
									<view class="activity-name">{{ activity.name }}</view>
									<view class="activity-desc">{{ activity.description || '精彩活动等你参加' }}</view>
									<view class="activity-meta">
										<text class="activity-time">⏰ {{ formatActivityTime(activity.startTime) }}</text>
										<text class="activity-location" v-if="activity.location">📍 {{ activity.location }}</text>
									</view>
									<view class="activity-footer">
										<text class="activity-price">¥{{ activity.price || 0 }}</text>
										<view class="activity-btn">立即报名</view>
									</view>
								</view>
								<view class="activity-status" v-if="activity.status === 1">报名中</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 成功案例走马灯 -->
		<view class="section success-case-section">
			<view class="section-header">
				<text class="section-title">💕 成功案例</text>
				<text class="section-more" @click="goToSuccessCaseList">查看更多 ></text>
			</view>
			<view class="success-case-carousel">
				<swiper class="case-swiper" :indicator-dots="true" :autoplay="true" :interval="4000" :duration="800"
					:circular="true" indicator-color="rgba(233, 30, 99, 0.3)" indicator-active-color="#E91E63">
					<swiper-item v-for="(caseItem, index) in successCases" :key="index">
						<view class="case-item" @click="handleSuccessCaseClick(caseItem)">
							<view class="case-image-wrapper">
								<image :src="caseItem.image_url || caseItem.imageUrl" class="case-image" mode="aspectFill"
									@error="handleImageError" @load="handleImageLoad"></image>
								<view class="case-overlay">
									<view class="success-badge">
										<text class="badge-icon">✓</text>
									</view>
								</view>
							</view>
							<view class="case-content">
								<view class="couple-names">{{ (caseItem.male_user_nickname || caseItem.maleUserNickname) }} & {{ (caseItem.female_user_nickname || caseItem.femaleUserNickname) }}</view>
								<view class="case-quote">{{ caseItem.quote || '我们通过平台找到了彼此❤️' }}</view>
								<view class="case-meta">
									<text class="marriage-date">💒 {{ formatMarriageDate(caseItem.marriage_date || caseItem.marriageDate) }}</text>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<!-- 每日签到卡片 -->
		<view class="section checkin-section">
			<view class="checkin-card" @click="showCheckinCard">
				<view class="checkin-left">
					<view class="checkin-calendar">
						<text class="calendar-icon">📅</text>
						<text class="checkin-day">{{ getCurrentDay() }}</text>
					</view>
					<view class="checkin-info">
						<text class="checkin-title">每日签到</text>
						<text class="checkin-desc">连续签到{{ checkinData.continuousDays }}天</text>
					</view>
				</view>
				<view class="checkin-right">
					<view class="checkin-reward">
						<text class="reward-text">今日奖励</text>
						<text class="reward-coins">+{{ todayReward }}金币</text>
					</view>
					<view class="checkin-btn" :class="{ 'checked': checkinData.todayChecked }">
						{{ checkinData.todayChecked ? '已签到' : '签到' }}
					</view>
				</view>
			</view>
		</view>

		<!-- 今日缘分推荐 -->
		<view class="section fate-recommend-section">
			<view class="section-header">
				<text class="section-title">🌟 今日缘分</text>
				<text class="section-more" @click="goToRecommend">查看更多 ></text>
			</view>
			<view class="fate-cards">
				<view class="fate-card" v-for="(user, index) in todayRecommendUsers" :key="index" 
					@click="handleUserClick(user)">
					<view class="user-avatar-wrapper">
						<image :src="user.avatar" class="user-avatar" mode="aspectFill"
							@error="handleImageError" @load="handleImageLoad"></image>
						<view class="online-status" v-if="user.isOnline"></view>
					</view>
					<view class="user-basic-info">
						<text class="user-nickname">{{ user.nickname }}</text>
						<text class="user-age-location">{{ user.age }}岁 · {{ user.city }}</text>
					</view>
					<view class="match-score">
						<text class="match-text">匹配度</text>
						<text class="match-percentage">{{ user.matchScore }}%</text>
					</view>
					<view class="user-tags">
						<text class="user-tag" v-for="(tag, tagIndex) in user.tags.slice(0, 2)" :key="tagIndex">
							{{ tag }}
						</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 个人魅力指数 -->
		<view class="section charm-index-section" v-if="userInfo.userId">
			<view class="charm-card">
				<view class="charm-header">
					<text class="charm-title">💖 个人魅力指数</text>
					<text class="charm-score">{{ charmIndex.totalScore }}</text>
				</view>
				<view class="charm-progress">
					<view class="progress-bar">
						<view class="progress-fill" :style="{ width: charmIndex.totalScore + '%' }"></view>
					</view>
					<text class="progress-text">超越了{{ charmIndex.beatPercentage }}%的用户</text>
				</view>
				<view class="charm-items">
					<view class="charm-item" v-for="(item, index) in charmIndex.items" :key="index">
						<text class="charm-item-label">{{ item.label }}</text>
						<view class="charm-item-progress">
							<view class="item-progress-bar">
								<view class="item-progress-fill" :style="{ width: item.score + '%' }"></view>
							</view>
							<text class="charm-item-score">{{ item.score }}%</text>
						</view>
					</view>
				</view>
				<view class="charm-tip">
					<text class="tip-text">💡 {{ charmIndex.tip }}</text>
				</view>
			</view>
		</view>

		<!-- 底部占位 -->
		<view class="bottom-placeholder"></view>

		<!-- 底部导航栏 -->
		<view class="tabbar">
			<view class="tabbar-item active" @click="switchTab('index')">
				<text class="tabbar-icon">🏠</text>
				<text class="tabbar-text">首页</text>
			</view>
			<view class="tabbar-item" @click="switchTab('plaza')">
				<text class="tabbar-icon">💕</text>
				<text class="tabbar-text">广场</text>
			</view>
			<view class="tabbar-item" @click="switchTab('recommend')">
				<text class="tabbar-icon">👍</text>
				<text class="tabbar-text">推荐</text>
			</view>
			<view class="tabbar-item" @click="switchTab('message')">
				<text class="tabbar-icon">💬</text>
				<text class="tabbar-text">消息</text>
				<view v-if="unreadCount > 0" class="tabbar-badge">{{ unreadCount }}</view>
			</view>
			<view class="tabbar-item" @click="switchTab('mine')">
				<text class="tabbar-icon">👤</text>
				<text class="tabbar-text">我的</text>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/utils/api.js'
    import { formatTime, formatCountdown, isLoggedIn, goToLogin } from '@/utils/util.js'
	import { DEFAULT_IMAGES, ACTIVITY_TYPES } from '@/config/index.js'
	
	export default {
		data() {
			return {
				// 用户信息
				userInfo: {
					nickname: '小张',
					userId: null
				},
				matchCount: 3,
				unreadCount: 2,

				// 轮播图数据
				bannerList: [
					{
						id: 1,
						name: '七夕单身派对',
						subtitle: '仅剩5席',
						cover_image: DEFAULT_IMAGES.banner,
						type: 'activity',
						targetId: 1
					},
					{
						id: 2,
						name: '情感沟通课',
						subtitle: '限时5折',
						cover_image: DEFAULT_IMAGES.banner,
						type: 'course',
						targetId: 1
					},
					{
						id: 3,
						name: '他们通过我们结婚了！',
						subtitle: '查看更多成功案例',
						cover_image: DEFAULT_IMAGES.banner,
						type: 'case',
						targetId: 1
					}
				],

				// 公告数据
				noticeList: [
					{ id: 1, content: '【平台公告】本周成功牵手12对！红娘1对1服务限时8折！' },
					{ id: 2, content: '【活动预告】周末单身联谊活动开始报名啦！名额有限，先到先得！' },
					{ id: 3, content: '【好消息】恭喜会员小李和小王成功牵手，祝福他们！' }
				],

				// 功能入口
				functionList: [
					{ id: 1, name: '精品课程', icon: '📚', path: '/pages/courses/list' },
					{ id: 2, name: '红娘服务', icon: '👩‍❤️‍👨', path: '/pages/matchmakers/list' },
					{ id: 3, name: '星命测算', icon: '🔮', path: '/pages/astrology/index' },
					{ id: 4, name: '今日推荐', icon: '💬', path: '/pages/recommend/index', needLogin: true },
					{ id: 5, name: '兼职红娘', icon: '💼', path: '/pages/part-time-matchmaker/index' },
					{ id: 6, name: '私人定制', icon: '🎯', path: '/pages/customize/index' }
				],

				// 热门活动
				hotActivities: [],

				// 成功案例
				successCases: [],

				// VIP特权（保留但不在首页显示）
				vipPrivileges: [
					{ icon: '💎', text: '专属红娘服务' },
					{ icon: '⚡', text: '优先匹配推荐' },
					{ icon: '👑', text: '贵族身份标识' },
					{ icon: '🔒', text: '隐身访问模式' }
				],

				// 签到数据
				checkinData: {
					continuousDays: 3,
					todayChecked: false
				},
				todayReward: 10,

				// 今日推荐用户
				todayRecommendUsers: [
					{
						id: 1,
						avatar: DEFAULT_IMAGES.avatar || 'https://via.placeholder.com/120',
						nickname: '温柔小姐姐',
						age: 26,
						city: '杭州',
						matchScore: 92,
						isOnline: true,
						tags: ['爱旅游', '读书控']
					},
					{
						id: 2,
						avatar: DEFAULT_IMAGES.avatar || 'https://via.placeholder.com/120',
						nickname: '阳光大男孩',
						age: 28,
						city: '上海',
						matchScore: 88,
						isOnline: false,
						tags: ['健身达人', '美食家']
					},
					{
						id: 3,
						avatar: DEFAULT_IMAGES.avatar || 'https://via.placeholder.com/120',
						nickname: '文艺青年',
						age: 25,
						city: '北京',
						matchScore: 85,
						isOnline: true,
						tags: ['音乐爱好者', '摄影师']
					}
				],

				// 个人魅力指数
				charmIndex: {
					totalScore: 75,
					beatPercentage: 68,
					items: [
						{ label: '资料完整度', score: 80 },
						{ label: '活跃度', score: 70 },
						{ label: '互动质量', score: 75 },
						{ label: '形象分数', score: 72 }
					],
					tip: '完善更多个人信息可提升魅力指数'
				},

				// 倒计时定时器
				countdownTimer: null,

				// 图片加载错误计数
				imageErrorCount: 0
			}
		},

		onLoad() {
			this.loadUserInfo()
			this.loadBannerData()
			this.loadNoticeData()
			this.loadCheckinData()
			this.loadTodayRecommend()
			this.loadCharmIndex()
			this.loadHotActivities()
			this.loadSuccessCases()
		},

		onUnload() {
			// 清理资源
		},

		methods: {
			// 加载用户信息
			loadUserInfo() {
				// 从本地存储或接口获取用户信息
				const userInfo = uni.getStorageSync('userInfo')
				if (userInfo) {
					this.userInfo = userInfo
					this.matchCount = Math.floor(Math.random() * 10) + 1
				}
			},

			// 加载轮播图数据
			async loadBannerData() {
				try {
					// 调用 API 获取轮播图数据
					const data = await api.home.getBanners()
					if (data && data.length > 0) {
						this.bannerList = data
					}
				} catch (error) {
					console.error('获取轮播图失败:', error)
					// 使用默认数据
				}
			},

			// 加载公告数据
			async loadNoticeData() {
				try {
					// 调用 API 获取公告数据
					const data = await api.home.getNotices()
					if (data && data.length > 0) {
						this.noticeList = data
					}
				} catch (error) {
					console.error('获取公告失败:', error)
					// 使用默认数据
				}
			},

			// 加载签到数据
			async loadCheckinData() {
				try {
					// 模拟获取签到数据
					const data = {
						continuousDays: Math.floor(Math.random() * 10) + 1,
						todayChecked: Math.random() > 0.5
					}
					this.checkinData = data
					this.todayReward = 10 + (this.checkinData.continuousDays * 2)
				} catch (error) {
					console.error('获取签到数据失败:', error)
				}
			},

			// 加载今日推荐
			async loadTodayRecommend() {
				try {
					// 调用 API 获取推荐用户
					// const data = await api.recommend.getTodayUsers()
					// if (data && data.length > 0) {
					//     this.todayRecommendUsers = data
					// }
				} catch (error) {
					console.error('获取推荐用户失败:', error)
				}
			},

			// 加载魅力指数
			async loadCharmIndex() {
				try {
					if (this.userInfo.userId) {
						// 调用 API 获取魅力指数
						// const data = await api.user.getCharmIndex(this.userInfo.userId)
						// if (data) {
						//     this.charmIndex = data
						// }
					}
				} catch (error) {
					console.error('获取魅力指数失败:', error)
				}
			},

			// 加载热门活动
			async loadHotActivities() {
				try {
					// 调用 API 获取热门活动
					const data = await api.activity.getList({
						type: 'hot',
						limit: 3
					})
					if (data && data.length > 0) {
						this.hotActivities = data.map(activity => ({
							...activity,
							coverImage: this.validateImageUrl(activity.cover_image || activity.coverImage)
						}))
					} else {
						// 使用默认活动数据
						this.hotActivities = [
							{
								id: 1,
								name: '七夕单身派对',
								description: '浪漫七夕夜，遇见更好的ta',
								coverImage: DEFAULT_IMAGES.banner,
								startTime: '2024-02-14 19:00:00',
								location: '杭州西湖文化广场',
								price: 99,
								status: 1
							},
							{
								id: 2,
								name: '情人节主题聚会',
								description: '高端单身聚会，品味生活',
								coverImage: DEFAULT_IMAGES.banner,
								startTime: '2024-02-14 20:00:00',
								location: '上海外滩茶餐厅',
								price: 128,
								status: 1
							},
							{
								id: 3,
								name: '春日户外踏青',
								description: '拥抱春天，邂逅美好',
								coverImage: DEFAULT_IMAGES.banner,
								startTime: '2024-03-20 14:00:00',
								location: '苏州园林博物馆',
								price: 68,
								status: 1
							}
						]
					}
				} catch (error) {
					console.error('获取热门活动失败:', error)
					// 使用默认数据
					this.hotActivities = [
						{
							id: 1,
							name: '七夕单身派对',
							description: '浪漫七夕夜，遇见更好的ta',
							coverImage: DEFAULT_IMAGES.banner,
							startTime: '2024-02-14 19:00:00',
							location: '杭州西湖文化广场',
							price: 99,
							status: 1
						},
						{
							id: 2,
							name: '情人节主题聚会',
							description: '高端单身聚会，品味生活',
							coverImage: DEFAULT_IMAGES.banner,
							startTime: '2024-02-14 20:00:00',
							location: '上海外滩茶餐厅',
							price: 128,
							status: 1
						}
					]
				}
			},

			// 格式化活动时间
			formatActivityTime(timeStr) {
				if (!timeStr) return '时间待定'
				try {
					const date = new Date(timeStr)
					const month = date.getMonth() + 1
					const day = date.getDate()
					const hour = date.getHours()
					const minute = date.getMinutes()
					return `${month}月${day}日 ${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`
				} catch (error) {
					return '时间待定'
				}
			},

			// 加载成功案例
			async loadSuccessCases() {
				try {
					// 调用 API 获取成功案例列表
					const data = await api.successCase.getList({
						pageNum: 1,
						pageSize: 5
					})
					if (data && data.length > 0) {
						this.successCases = data.map(caseItem => ({
							...caseItem,
							image_url: this.validateImageUrl(caseItem.image_url || caseItem.imageUrl || DEFAULT_IMAGES.couple)
						}))
					} else {
						// 使用默认数据
						this.successCases = [
							{
								case_no: 'CASE001',
								male_user_nickname: '张先生',
								female_user_nickname: '李女士',
								image_url: DEFAULT_IMAGES.couple,
								quote: '从第一次咖啡约会到领证，只用了90天',
								marriage_date: '2024-08-20'
							},
							{
								case_no: 'CASE002',
								male_user_nickname: '王先生',
								female_user_nickname: '赵女士',
								image_url: DEFAULT_IMAGES.couple,
								quote: '感谢红娘的专业服务，让我们相遇相知',
								marriage_date: '2024-09-15'
							},
							{
								case_no: 'CASE003',
								male_user_nickname: '刘先生',
								female_user_nickname: '陈女士',
								image_url: DEFAULT_IMAGES.couple,
								quote: '缘分天注定，感恩平台让我们走到一起',
								marriage_date: '2024-10-01'
							}
						]
					}
				} catch (error) {
					console.error('获取成功案例失败:', error)
					// 使用默认数据
					this.successCases = [
						{
							case_no: 'CASE001',
							male_user_nickname: '张先生',
							female_user_nickname: '李女士',
							image_url: DEFAULT_IMAGES.couple,
							quote: '从第一次咖啡约会到领证，只用了90天',
							marriage_date: '2024-08-20'
						},
						{
							case_no: 'CASE002',
							male_user_nickname: '王先生',
							female_user_nickname: '赵女士',
							image_url: DEFAULT_IMAGES.couple,
							quote: '感谢红娘的专业服务，让我们相遇相知',
							marriage_date: '2024-09-15'
						}
					]
				}
			},

			// 格式化结婚日期
			formatMarriageDate(dateStr) {
				if (!dateStr) return '佳音渐近'
				try {
					const date = new Date(dateStr)
					const year = date.getFullYear()
					const month = date.getMonth() + 1
					const day = date.getDate()
					return `${year}年${month}月${day}日`
				} catch (error) {
					return '佳音渐近'
				}
			},

			// 获取当前日期
			getCurrentDay() {
				const today = new Date()
				return today.getDate()
			},

			// 显示签到卡片
			showCheckinCard() {
				if (this.checkinData.todayChecked) {
					uni.showToast({
						title: '今日已签到',
						icon: 'success'
					})
				} else {
					// 执行签到
					this.handleCheckin()
				}
			},

			// 处理签到
			handleCheckin() {
				// 调用签到接口
				uni.showLoading({ title: '签到中...' })
				
				setTimeout(() => {
					uni.hideLoading()
					this.checkinData.todayChecked = true
					this.checkinData.continuousDays += 1
					
					uni.showToast({
						title: `签到成功！获得${this.todayReward}金币`,
						icon: 'success',
						duration: 2000
					})
				}, 1000)
			},

			// 跳转到VIP页面
			goToVip() {
				uni.navigateTo({
					url: '/pages/vip/index'
				})
			},

			// 跳转到活动列表
			goToActivityList() {
				uni.navigateTo({
					url: '/pages/activities/list'
				})
			},

			// 处理活动点击
			handleActivityClick(activity) {
				uni.navigateTo({
					url: `/pages/activities/detail?id=${activity.id}`
				})
			},

			// 跳转到成功案例列表
			goToSuccessCaseList() {
				uni.navigateTo({
					url: '/pages/success-case/list'
				})
			},

			// 处理成功案例点击
			handleSuccessCaseClick(caseItem) {
				const caseNo = caseItem.case_no || caseItem.caseNo
				uni.navigateTo({
					url: `/pages/success-case/detail?caseNo=${caseNo}`
				})
			},

			// 处理图片加载错误
			handleImageError(e) {
				const failedSrc = e.detail ? e.detail.errMsg : '未知错误'
				console.warn('图片加载失败:', failedSrc)
				
				// 显示用户友好的提示
				if (this.imageErrorCount < 3) { // 避免过多提示
					uni.showToast({
						title: '图片加载失败，使用默认图片',
						icon: 'none',
						duration: 2000
					})
					this.imageErrorCount = (this.imageErrorCount || 0) + 1
				}
			},

			// 处理图片加载成功
			handleImageLoad(e) {
				// 图片加载成功，重置错误计数
				this.imageErrorCount = 0
			},

			// 验证和处理图片URL
			validateImageUrl(url) {
				if (!url) {
					return DEFAULT_IMAGES.banner || '/static/default-banner.jpg'
				}
				
				// 如果是相对路径，添加协议和域名
				if (url.startsWith('/')) {
					return `http://115.190.125.125:9000${url}`
				}
				
				// 如果已经是完整URL，直接返回
				if (url.startsWith('http')) {
					return url
				}
				
				// 其他情况返回默认图片
				return DEFAULT_IMAGES.banner || '/static/default-banner.jpg'
			},

			// 跳转到推荐页面
			goToRecommend() {
				uni.navigateTo({
					url: '/pages/recommend/index'
				})
			},

			// 处理用户点击
			handleUserClick(user) {
				uni.navigateTo({
					url: `/pages/profile/index?userId=${user.id}`
				})
			},

			// 格式化时间
			formatTime,

			// Banner点击
			handleBannerClick(banner) {
				if (banner.type === 'activity') {
					uni.navigateTo({
						url: `/pages/activities/detail?id=${banner.targetId}`
					})
				} else if (banner.type === 'course') {
					uni.navigateTo({
						url: `/pages/courses/detail?id=${banner.targetId}`
					})
				} else if (banner.type === 'case') {
					uni.navigateTo({
						url: '/pages/success-case/list'
					})
				}
			},

            // 功能入口点击
            handleFunctionClick(item) {
                // 今日推荐：直接跳转到专门的推荐页面
                if (item && (item.id === 6 || item.name === '今日推荐')) {
                    console.log('点击今日推荐，跳转到专门页面')
                    uni.navigateTo({
                        url: '/pages/today-recommend/index',
                        success: () => {
                            console.log('跳转今日推荐页面成功')
                        },
                        fail: (err) => {
                            console.error('跳转今日推荐页面失败:', err)
                            uni.showToast({
                                title: '页面跳转失败',
                                icon: 'none'
                            })
                        }
                    })
                    return
                }
                // 检查是否需要登录
                if (item.needLogin && !isLoggedIn()) {
                    uni.navigateTo({
                        url: '/pages/page3/page3'
                    })
                    return
                }

				if (item.path) {
					let url = item.path
					if (item.query) {
						const queryStr = Object.keys(item.query).map(key => `${key}=${item.query[key]}`).join('&')
						url += '?' + queryStr
					}
					uni.navigateTo({
						url: url,
						fail: () => {
							uni.showToast({
								title: '功能开发中',
								icon: 'none'
							})
						}
					})
				}
			},


			// 跳转到消息中心
			goToMessages() {
				uni.navigateTo({
					url: '/pages/message/index',
					fail: () => {
						uni.showToast({
							title: '功能开发中',
							icon: 'none'
						})
					}
				})
			},


		// 切换Tab
		switchTab(tab) {
			if (tab === 'index') return

			const tabPages = {
				plaza: '/pages/plaza/index',
				recommend: '/pages/recommend/index',
				message: '/pages/message/index',
				mine: '/pages/mine/index'
			}

			if (tabPages[tab]) {
				uni.redirectTo({
					url: tabPages[tab]
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
	.home-page {
		min-height: 100vh;
		background: linear-gradient(135deg, #FFE5F1 0%, #FFF5F8 25%, #FFEEF6 50%, #FFF9FB 75%, #FFFFFF 100%);
		padding-bottom: 120rpx;
		position: relative;
		
		&::before {
			content: '';
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			height: 50vh;
			background: linear-gradient(145deg, rgba(233, 30, 99, 0.03) 0%, rgba(255, 182, 193, 0.05) 100%);
			pointer-events: none;
			z-index: 0;
		}
		
		> * {
			position: relative;
			z-index: 1;
		}
	}

	/* 顶部状态栏 */
	.top-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 25rpx 35rpx;
		background: linear-gradient(135deg, #FFFFFF 0%, #FEFBFC 100%);
		backdrop-filter: blur(20rpx);
		border-bottom: 1rpx solid rgba(233, 30, 99, 0.08);
		box-shadow: 0 4rpx 20rpx rgba(233, 30, 99, 0.06);

		.logo {
			font-size: 38rpx;
			font-weight: 800;
			background: linear-gradient(135deg, #E91E63 0%, #FF6B9D 100%);
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: transparent;
			text-shadow: 0 2rpx 8rpx rgba(233, 30, 99, 0.2);
		}

		.msg-icon {
			position: relative;
			width: 68rpx;
			height: 68rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: linear-gradient(135deg, #FFE5F1 0%, #FFECF3 100%);
			border-radius: 50%;
			transition: all 0.3s ease;
			
			&:active {
				transform: scale(0.95);
			}

			.icon {
				font-size: 44rpx;
				filter: drop-shadow(0 2rpx 4rpx rgba(233, 30, 99, 0.2));
			}

			.badge {
				position: absolute;
				top: -5rpx;
				right: -5rpx;
				min-width: 36rpx;
				height: 36rpx;
				line-height: 36rpx;
				padding: 0 8rpx;
				background: linear-gradient(135deg, #FF6B6B 0%, #FF8A80 100%);
				color: #FFFFFF;
				font-size: 20rpx;
				font-weight: bold;
				border-radius: 18rpx;
				text-align: center;
				box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.4);
				border: 3rpx solid #FFFFFF;
			}
		}
	}

	/* 个性化欢迎语 */
	.welcome-card {
		margin: 25rpx 35rpx;
		padding: 35rpx;
		background: linear-gradient(135deg, #FFFFFF 0%, #FFF8FA 50%, #FFE8F1 100%);
		border-radius: 28rpx;
		box-shadow: 0 8rpx 32rpx rgba(233, 30, 99, 0.12), 
					0 2rpx 12rpx rgba(233, 30, 99, 0.08);
		border: 1rpx solid rgba(255, 255, 255, 0.6);
		backdrop-filter: blur(10rpx);
		position: relative;
		overflow: hidden;
		
		&::before {
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			width: 120rpx;
			height: 120rpx;
			background: radial-gradient(circle, rgba(233, 30, 99, 0.08) 0%, transparent 70%);
			border-radius: 50%;
			transform: translate(30rpx, -30rpx);
		}

		.welcome-content {
			display: flex;
			flex-direction: column;
			gap: 16rpx;
			position: relative;

			.welcome-text {
				font-size: 34rpx;
				font-weight: 700;
				background: linear-gradient(135deg, #333333 0%, #555555 100%);
				-webkit-background-clip: text;
				background-clip: text;
				-webkit-text-fill-color: transparent;
				line-height: 1.3;
			}

			.match-info {
				font-size: 28rpx;
				color: #666666;
				line-height: 1.4;

				.highlight {
					background: linear-gradient(135deg, #E91E63 0%, #FF6B9D 100%);
					-webkit-background-clip: text;
					background-clip: text;
					-webkit-text-fill-color: transparent;
					font-weight: 800;
					font-size: 36rpx;
					display: inline-block;
					animation: pulse 2s ease-in-out infinite;
				}
			}
		}
	}
	
	@keyframes pulse {
		0%, 100% { transform: scale(1); }
		50% { transform: scale(1.05); }
	}

	/* 轮播图 */
	.banner-section {
		margin: 25rpx 35rpx;

		.banner-swiper {
			height: 380rpx;
			border-radius: 28rpx;
			overflow: hidden;
			box-shadow: 0 12rpx 40rpx rgba(233, 30, 99, 0.15),
						0 4rpx 16rpx rgba(233, 30, 99, 0.08);

			.banner-item {
				position: relative;
				width: 100%;
				height: 100%;
				overflow: hidden;
				
				&::after {
					content: '';
					position: absolute;
					inset: 0;
					background: linear-gradient(135deg, transparent 0%, rgba(0, 0, 0, 0.1) 100%);
					pointer-events: none;
				}

				.banner-image {
					width: 100%;
					height: 100%;
					transition: transform 0.5s ease;
				}

				.banner-mask {
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					padding: 35rpx;
					background: linear-gradient(to top, 
						rgba(0, 0, 0, 0.8) 0%, 
						rgba(0, 0, 0, 0.4) 50%, 
						transparent 100%);
					color: #FFFFFF;
					backdrop-filter: blur(10rpx);

					.banner-title {
						font-size: 38rpx;
						font-weight: 800;
						margin-bottom: 12rpx;
						text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
						line-height: 1.2;
					}

					.banner-subtitle {
						font-size: 26rpx;
						margin-bottom: 24rpx;
						opacity: 0.95;
						text-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.2);
					}

					.banner-btn {
						display: inline-block;
						padding: 12rpx 32rpx;
						background: linear-gradient(135deg, #E91E63 0%, #FF6B9D 100%);
						border-radius: 25rpx;
						font-size: 26rpx;
						font-weight: 600;
						box-shadow: 0 6rpx 20rpx rgba(233, 30, 99, 0.4);
						border: 2rpx solid rgba(255, 255, 255, 0.2);
						backdrop-filter: blur(5rpx);
						transition: all 0.3s ease;
						
						&:active {
							transform: translateY(2rpx);
							box-shadow: 0 4rpx 16rpx rgba(233, 30, 99, 0.3);
						}
					}
				}
			}
		}
	}

	/* 公告栏 */
	.notice-bar {
		display: flex;
		align-items: center;
		margin: 25rpx 35rpx;
		padding: 24rpx 30rpx;
		background: linear-gradient(135deg, #FFF8E1 0%, #FFFCF0 50%, #FFF9E6 100%);
		border-radius: 18rpx;
		box-shadow: 0 4rpx 16rpx rgba(255, 152, 0, 0.08);
		border: 1rpx solid rgba(255, 193, 7, 0.1);
		position: relative;
		overflow: hidden;
		
		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			width: 6rpx;
			background: linear-gradient(135deg, #FF9800 0%, #FFC107 100%);
		}

		.notice-icon {
			font-size: 34rpx;
			margin-right: 24rpx;
			animation: swing 3s ease-in-out infinite;
		}

		.notice-swiper {
			flex: 1;
			height: 44rpx;

			.notice-text {
				font-size: 28rpx;
				color: #795548;
				line-height: 44rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-weight: 500;
			}
		}
	}
	
	@keyframes swing {
		0%, 100% { transform: rotate(0deg); }
		25% { transform: rotate(-5deg); }
		75% { transform: rotate(5deg); }
	}

	/* 功能入口 */
	.function-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 32rpx;
		margin: 25rpx 35rpx;
		padding: 35rpx;
		background: linear-gradient(135deg, #FFFFFF 0%, #FEFBFC 100%);
		border-radius: 28rpx;
		box-shadow: 0 8rpx 32rpx rgba(233, 30, 99, 0.08),
					0 2rpx 16rpx rgba(233, 30, 99, 0.04);
		border: 1rpx solid rgba(233, 30, 99, 0.06);

		.grid-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 18rpx;
			padding: 25rpx 15rpx;
			transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
			border-radius: 20rpx;

			&:hover {
				transform: translateY(-8rpx);
			}

			&:active {
				transform: translateY(-4rpx) scale(0.98);
			}

			.grid-icon-wrapper {
				width: 110rpx;
				height: 110rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: linear-gradient(135deg, #FFE5F1 0%, #FFECF3 50%, #FFF0F5 100%);
				border-radius: 28rpx;
				box-shadow: 0 8rpx 24rpx rgba(233, 30, 99, 0.12),
							0 2rpx 8rpx rgba(233, 30, 99, 0.08);
				border: 2rpx solid rgba(255, 255, 255, 0.8);
				position: relative;
				overflow: hidden;
				
				&::before {
					content: '';
					position: absolute;
					inset: 0;
					background: linear-gradient(135deg, 
						rgba(255, 255, 255, 0.3) 0%, 
						transparent 50%, 
						rgba(233, 30, 99, 0.05) 100%);
					opacity: 0;
					transition: opacity 0.3s ease;
				}
				
				&:hover::before {
					opacity: 1;
				}

				.grid-icon {
					font-size: 52rpx;
					filter: drop-shadow(0 2rpx 8rpx rgba(233, 30, 99, 0.2));
					transition: transform 0.3s ease;
				}
			}

			.grid-text {
				font-size: 28rpx;
				font-weight: 600;
				color: #333333;
				text-align: center;
				line-height: 1.2;
			}
			
			&:hover .grid-icon-wrapper .grid-icon {
				transform: scale(1.1);
			}
		}
	}

	/* 区块样式 */
	.section {
		margin: 40rpx 0;

		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 35rpx;
			margin-bottom: 25rpx;

			.section-title {
				font-size: 36rpx;
				font-weight: 800;
				background: linear-gradient(135deg, #333333 0%, #555555 100%);
				-webkit-background-clip: text;
				background-clip: text;
				-webkit-text-fill-color: transparent;
				position: relative;
				
				&::after {
					content: '';
					position: absolute;
					bottom: -8rpx;
					left: 0;
					width: 60rpx;
					height: 6rpx;
					background: linear-gradient(135deg, #E91E63 0%, #FF6B9D 100%);
					border-radius: 3rpx;
				}
			}

			.section-more {
				font-size: 26rpx;
				color: #E91E63;
				font-weight: 600;
				padding: 8rpx 16rpx;
				border-radius: 20rpx;
				background: linear-gradient(135deg, rgba(233, 30, 99, 0.05) 0%, rgba(233, 30, 99, 0.1) 100%);
				transition: all 0.3s ease;
				
				&:active {
					transform: scale(0.95);
					background: linear-gradient(135deg, rgba(233, 30, 99, 0.1) 0%, rgba(233, 30, 99, 0.15) 100%);
				}
			}
		}
	}

	/* 热门活动展示区 */
	.activity-recommend-section {
		.activity-marquee {
			margin: 0 35rpx;
			background: linear-gradient(135deg, #FFFFFF 0%, #FEFBFC 100%);
			border-radius: 28rpx;
			box-shadow: 0 8rpx 32rpx rgba(233, 30, 99, 0.12),
						0 2rpx 16rpx rgba(233, 30, 99, 0.08);
			overflow: hidden;
			position: relative;
			
			&::before,
			&::after {
				content: '';
				position: absolute;
				top: 0;
				bottom: 0;
				width: 50rpx;
				pointer-events: none;
				z-index: 10;
			}
			
			&::before {
				left: 0;
				background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
			}
			
			&::after {
				right: 0;
				background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
			}

			.marquee-container {
				width: 100%;
				overflow: hidden;
				height: 320rpx;

				.marquee-content {
					display: flex;
					animation: marquee 20s linear infinite;
					width: 200%; /* 双倍宽度以支持无缝滚动 */
					
					&:hover {
						animation-play-state: paused;
					}

					.activity-item {
						flex-shrink: 0;
						margin-right: 20rpx;
						transition: all 0.3s ease;

						&:active {
							transform: scale(0.95);
						}

						.activity-card {
							width: 420rpx;
							background: rgba(255, 255, 255, 0.8);
							border-radius: 20rpx;
							overflow: hidden;
							box-shadow: 0 4rpx 16rpx rgba(233, 30, 99, 0.08);
							border: 1rpx solid rgba(233, 30, 99, 0.1);
							position: relative;
							backdrop-filter: blur(10rpx);

							.activity-image {
								width: 100%;
								height: 140rpx;
								background-color: #F5F5F5;
							}

							.activity-info {
								padding: 18rpx;

								.activity-name {
									font-size: 30rpx;
									font-weight: 700;
									color: #333333;
									margin-bottom: 8rpx;
									line-height: 1.3;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 1;
									overflow: hidden;
								}

								.activity-desc {
									font-size: 24rpx;
									color: #666666;
									margin-bottom: 12rpx;
									line-height: 1.4;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 1;
									overflow: hidden;
								}

								.activity-meta {
									display: flex;
									flex-direction: column;
									gap: 6rpx;
									margin-bottom: 15rpx;

									.activity-time,
									.activity-location {
										font-size: 22rpx;
										color: #666666;
										line-height: 1.3;
									}
								}

								.activity-footer {
									display: flex;
									justify-content: space-between;
									align-items: center;

									.activity-price {
										font-size: 28rpx;
										font-weight: 700;
										color: #E91E63;
									}

									.activity-btn {
										padding: 6rpx 16rpx;
										background: linear-gradient(135deg, #E91E63 0%, #FF6B9D 100%);
										color: #FFFFFF;
										font-size: 22rpx;
										font-weight: 600;
										border-radius: 15rpx;
										box-shadow: 0 2rpx 8rpx rgba(233, 30, 99, 0.3);
										transition: all 0.3s ease;

										&:active {
											transform: scale(0.95);
										}
									}
								}
							}

							.activity-status {
								position: absolute;
								top: 10rpx;
								right: 10rpx;
								padding: 4rpx 10rpx;
								background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
								color: #FFFFFF;
								font-size: 20rpx;
								font-weight: 600;
								border-radius: 10rpx;
								box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.3);
								border: 1rpx solid rgba(255, 255, 255, 0.8);
								animation: pulse-status 2s ease-in-out infinite;
							}
						}
					}
				}
			}
		}
	}

	/* 签到卡片 */
	.checkin-section {
		margin: 25rpx 35rpx;

		.checkin-card {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			background: linear-gradient(135deg, #FFFFFF 0%, #F8F9FA 100%);
			border-radius: 28rpx;
			box-shadow: 0 8rpx 32rpx rgba(233, 30, 99, 0.08);
			border: 1rpx solid rgba(233, 30, 99, 0.06);
			position: relative;
			overflow: hidden;

			&::before {
				content: '';
				position: absolute;
				top: 0;
				right: 0;
				width: 100rpx;
				height: 100rpx;
				background: radial-gradient(circle, rgba(233, 30, 99, 0.08) 0%, transparent 70%);
				border-radius: 50%;
				transform: translate(30rpx, -30rpx);
			}

			.checkin-left {
				display: flex;
				align-items: center;
				gap: 20rpx;

				.checkin-calendar {
					width: 80rpx;
					height: 80rpx;
					background: linear-gradient(135deg, #E91E63 0%, #FF6B9D 100%);
					border-radius: 20rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					box-shadow: 0 6rpx 20rpx rgba(233, 30, 99, 0.3);

					.calendar-icon {
						font-size: 20rpx;
						color: white;
						margin-bottom: 2rpx;
					}

					.checkin-day {
						font-size: 28rpx;
						font-weight: 800;
						color: white;
					}
				}

				.checkin-info {
					display: flex;
					flex-direction: column;
					gap: 5rpx;

					.checkin-title {
						font-size: 32rpx;
						font-weight: 700;
						color: #333333;
					}

					.checkin-desc {
						font-size: 24rpx;
						color: #666666;
					}
				}
			}

			.checkin-right {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				gap: 15rpx;

				.checkin-reward {
					text-align: right;

					.reward-text {
						font-size: 22rpx;
						color: #999999;
						display: block;
					}

					.reward-coins {
						font-size: 28rpx;
						font-weight: 700;
						background: linear-gradient(135deg, #FF9800 0%, #FFC107 100%);
						-webkit-background-clip: text;
						background-clip: text;
						-webkit-text-fill-color: transparent;
					}
				}

				.checkin-btn {
					padding: 12rpx 30rpx;
					background: linear-gradient(135deg, #E91E63 0%, #FF6B9D 100%);
					color: white;
					border-radius: 25rpx;
					font-size: 26rpx;
					font-weight: 600;
					box-shadow: 0 6rpx 20rpx rgba(233, 30, 99, 0.3);
					transition: all 0.3s ease;

					&.checked {
						background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
						box-shadow: 0 6rpx 20rpx rgba(76, 175, 80, 0.3);
					}

					&:active {
						transform: translateY(1rpx);
					}
				}
			}
		}
	}

	/* 今日缘分推荐 */
	.fate-recommend-section {
		.fate-cards {
			display: flex;
			gap: 20rpx;
			padding: 0 35rpx;
			overflow-x: auto;
			scrollbar-width: none;

			&::-webkit-scrollbar {
				display: none;
			}

			.fate-card {
				min-width: 320rpx;
				background: linear-gradient(135deg, #FFFFFF 0%, #FEFBFC 100%);
				border-radius: 28rpx;
				padding: 25rpx;
				box-shadow: 0 8rpx 32rpx rgba(233, 30, 99, 0.08);
				border: 1rpx solid rgba(233, 30, 99, 0.06);
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 15rpx;
				position: relative;
				transition: all 0.3s ease;

				&:active {
					transform: translateY(-5rpx);
					box-shadow: 0 12rpx 40rpx rgba(233, 30, 99, 0.12);
				}

				.user-avatar-wrapper {
					position: relative;

					.user-avatar {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						border: 3rpx solid rgba(233, 30, 99, 0.1);
					}

					.online-status {
						position: absolute;
						bottom: 5rpx;
						right: 5rpx;
						width: 20rpx;
						height: 20rpx;
						background: #4CAF50;
						border-radius: 50%;
						border: 3rpx solid white;
						box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
					}
				}

				.user-basic-info {
					text-align: center;

					.user-nickname {
						font-size: 28rpx;
						font-weight: 700;
						color: #333333;
						display: block;
						margin-bottom: 5rpx;
					}

					.user-age-location {
						font-size: 24rpx;
						color: #666666;
					}
				}

				.match-score {
					display: flex;
					align-items: center;
					gap: 8rpx;
					padding: 8rpx 16rpx;
					background: linear-gradient(135deg, rgba(233, 30, 99, 0.1) 0%, rgba(255, 107, 157, 0.1) 100%);
					border-radius: 20rpx;

					.match-text {
						font-size: 22rpx;
						color: #666666;
					}

					.match-percentage {
						font-size: 26rpx;
						font-weight: 700;
						background: linear-gradient(135deg, #E91E63 0%, #FF6B9D 100%);
						-webkit-background-clip: text;
						background-clip: text;
						-webkit-text-fill-color: transparent;
					}
				}

				.user-tags {
					display: flex;
					gap: 8rpx;
					flex-wrap: wrap;
					justify-content: center;

					.user-tag {
						font-size: 20rpx;
						color: #666666;
						background: rgba(233, 30, 99, 0.05);
						padding: 6rpx 12rpx;
						border-radius: 15rpx;
						border: 1rpx solid rgba(233, 30, 99, 0.1);
					}
				}
			}
		}
	}

	/* 个人魅力指数 */
	.charm-index-section {
		margin: 25rpx 35rpx;

		.charm-card {
			background: linear-gradient(135deg, #FFFFFF 0%, #FFF8FA 100%);
			border-radius: 28rpx;
			padding: 35rpx;
			box-shadow: 0 8rpx 32rpx rgba(233, 30, 99, 0.08);
			border: 1rpx solid rgba(233, 30, 99, 0.06);

			.charm-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 25rpx;

				.charm-title {
					font-size: 32rpx;
					font-weight: 800;
					background: linear-gradient(135deg, #333333 0%, #555555 100%);
					-webkit-background-clip: text;
					background-clip: text;
					-webkit-text-fill-color: transparent;
				}

				.charm-score {
					font-size: 48rpx;
					font-weight: 800;
					background: linear-gradient(135deg, #E91E63 0%, #FF6B9D 100%);
					-webkit-background-clip: text;
					background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}

			.charm-progress {
				margin-bottom: 30rpx;

				.progress-bar {
					width: 100%;
					height: 12rpx;
					background: rgba(233, 30, 99, 0.1);
					border-radius: 6rpx;
					overflow: hidden;
					margin-bottom: 10rpx;

					.progress-fill {
						height: 100%;
						background: linear-gradient(135deg, #E91E63 0%, #FF6B9D 100%);
						border-radius: 6rpx;
						transition: width 1s ease;
					}
				}

				.progress-text {
					font-size: 24rpx;
					color: #666666;
					text-align: center;
					display: block;
				}
			}

			.charm-items {
				display: flex;
				flex-direction: column;
				gap: 20rpx;
				margin-bottom: 25rpx;

				.charm-item {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.charm-item-label {
						font-size: 26rpx;
						color: #666666;
						font-weight: 500;
					}

					.charm-item-progress {
						display: flex;
						align-items: center;
						gap: 12rpx;
						flex: 1;
						margin-left: 20rpx;

						.item-progress-bar {
							flex: 1;
							height: 8rpx;
							background: rgba(233, 30, 99, 0.1);
							border-radius: 4rpx;
							overflow: hidden;

							.item-progress-fill {
								height: 100%;
								background: linear-gradient(135deg, #E91E63 0%, #FF6B9D 100%);
								border-radius: 4rpx;
								transition: width 1s ease;
							}
						}

						.charm-item-score {
							font-size: 24rpx;
							color: #E91E63;
							font-weight: 600;
							min-width: 60rpx;
							text-align: right;
						}
					}
				}
			}

			.charm-tip {
				padding: 20rpx;
				background: linear-gradient(135deg, rgba(233, 30, 99, 0.05) 0%, rgba(255, 107, 157, 0.05) 100%);
				border-radius: 15rpx;
				border: 1rpx solid rgba(233, 30, 99, 0.1);

				.tip-text {
					font-size: 24rpx;
					color: #666666;
					line-height: 1.5;
				}
			}
		}
	}

	/* 底部占位 */
	.bottom-placeholder {
		height: 30rpx;
	}

	/* 底部导航栏 */
	.tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		background: linear-gradient(135deg, #FFFFFF 0%, #FEFBFC 100%);
		border-top: 1rpx solid rgba(233, 30, 99, 0.08);
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-shadow: 0 -8rpx 32rpx rgba(233, 30, 99, 0.08),
					0 -2rpx 16rpx rgba(233, 30, 99, 0.04);
		backdrop-filter: blur(20rpx);
		z-index: 999;

		.tabbar-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 18rpx 0;
			position: relative;
			transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
			border-radius: 20rpx 20rpx 0 0;
			
			&:active {
				transform: scale(0.95);
			}

			.tabbar-icon {
				font-size: 46rpx;
				margin-bottom: 8rpx;
				filter: drop-shadow(0 2rpx 4rpx rgba(233, 30, 99, 0.1));
				transition: all 0.3s ease;
			}

			.tabbar-text {
				font-size: 22rpx;
				color: #666666;
				font-weight: 500;
				transition: all 0.3s ease;
			}

			.tabbar-badge {
				position: absolute;
				top: 8rpx;
				right: 25%;
				min-width: 36rpx;
				height: 36rpx;
				line-height: 36rpx;
				padding: 0 8rpx;
				background: linear-gradient(135deg, #FF6B6B 0%, #FF8A80 100%);
				color: #FFFFFF;
				font-size: 20rpx;
				font-weight: bold;
				border-radius: 18rpx;
				text-align: center;
				box-shadow: 0 4rpx 16rpx rgba(255, 107, 107, 0.4);
				border: 2rpx solid #FFFFFF;
				animation: bounce 2s ease-in-out infinite;
			}

			&.active {
				background: linear-gradient(135deg, rgba(233, 30, 99, 0.05) 0%, rgba(233, 30, 99, 0.1) 100%);
				
				.tabbar-icon {
					transform: scale(1.1);
					filter: drop-shadow(0 4rpx 8rpx rgba(233, 30, 99, 0.2));
				}
				
				.tabbar-text {
					background: linear-gradient(135deg, #E91E63 0%, #FF6B9D 100%);
					-webkit-background-clip: text;
					background-clip: text;
					-webkit-text-fill-color: transparent;
					font-weight: 700;
				}
			}
		}
	}

	/* 成功案例走马灯 */
	.success-case-section {
		.success-case-carousel {
			margin: 0 35rpx;

			.case-swiper {
				height: 300rpx;
				border-radius: 28rpx;
				overflow: hidden;
				box-shadow: 0 8rpx 32rpx rgba(233, 30, 99, 0.12),
							0 2rpx 16rpx rgba(233, 30, 99, 0.08);

				.case-item {
					display: flex;
					height: 100%;
					background: linear-gradient(135deg, #FFFFFF 0%, #FEFBFC 100%);
					padding: 25rpx;
					position: relative;
					transition: all 0.3s ease;

					&:active {
						transform: scale(0.98);
					}

					.case-image-wrapper {
						width: 200rpx;
						height: 250rpx;
						position: relative;
						border-radius: 20rpx;
						overflow: hidden;
						margin-right: 25rpx;

						.case-image {
							width: 100%;
							height: 100%;
							border-radius: 20rpx;
						}

						.case-overlay {
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							background: linear-gradient(
								to bottom, 
								transparent 0%, 
								rgba(0, 0, 0, 0.1) 60%, 
								rgba(0, 0, 0, 0.3) 100%
							);
							border-radius: 20rpx;

							.success-badge {
								position: absolute;
								top: 15rpx;
								right: 15rpx;
								width: 50rpx;
								height: 50rpx;
								background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
								border-radius: 50%;
								display: flex;
								align-items: center;
								justify-content: center;
								box-shadow: 0 4rpx 16rpx rgba(76, 175, 80, 0.4);
								border: 3rpx solid rgba(255, 255, 255, 0.9);
								animation: pulse-success 2s ease-in-out infinite;

								.badge-icon {
									color: #FFFFFF;
									font-size: 28rpx;
									font-weight: bold;
								}
							}
						}
					}

					.case-content {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: center;
						padding: 15rpx 0;

						.couple-names {
							font-size: 32rpx;
							font-weight: 800;
							background: linear-gradient(135deg, #333333 0%, #555555 100%);
							-webkit-background-clip: text;
							background-clip: text;
							-webkit-text-fill-color: transparent;
							margin-bottom: 15rpx;
							line-height: 1.3;
						}

						.case-quote {
							font-size: 26rpx;
							color: #666666;
							line-height: 1.5;
							margin-bottom: 15rpx;
							font-style: italic;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							position: relative;

							&::before {
								content: '"';
								color: #E91E63;
								font-size: 36rpx;
								position: absolute;
								left: -16rpx;
								top: -5rpx;
								opacity: 0.6;
							}

							&::after {
								content: '"';
								color: #E91E63;
								font-size: 36rpx;
								position: absolute;
								right: 5rpx;
								bottom: -8rpx;
								opacity: 0.6;
							}
						}

						.case-meta {
							.marriage-date {
								font-size: 24rpx;
								color: #E91E63;
								font-weight: 600;
								padding: 8rpx 16rpx;
								background: linear-gradient(135deg, rgba(233, 30, 99, 0.1) 0%, rgba(255, 107, 157, 0.1) 100%);
								border-radius: 15rpx;
								border: 1rpx solid rgba(233, 30, 99, 0.2);
								display: inline-block;
							}
						}
					}
				}
			}
		}
	}

	@keyframes pulse-success {
		0%, 100% { 
			transform: scale(1);
			box-shadow: 0 4rpx 16rpx rgba(76, 175, 80, 0.4);
		}
		50% { 
			transform: scale(1.05);
			box-shadow: 0 6rpx 24rpx rgba(76, 175, 80, 0.6);
		}
	}

	@keyframes marquee {
		0% {
			transform: translateX(0);
		}
		100% {
			transform: translateX(-50%);
		}
	}

	@keyframes pulse-status {
		0%, 100% { 
			transform: scale(1);
			box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.3);
		}
		50% { 
			transform: scale(1.05);
			box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.5);
		}
	}
	
	@keyframes bounce {
		0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
		40% { transform: translateY(-4rpx); }
		60% { transform: translateY(-2rpx); }
	}
</style>

